<template>
    <el-dialog v-model="dialog" :title="title" width="660px" :append-to-body="true">
        <el-row v-for="(item, index) in materialList" :key="item.id" class="material-row">
            <el-col :span="6" v-if="title == '文档'">
                <el-tree :data="[item]" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="nodeClick($event, index)">
                    <template #default="{ data }">
                        <span class="custom-tree-node">
                            {{data.label}}
                            <span>({{ item.value.length }})</span>
                        </span>
                    </template>
                </el-tree>
            </el-col>
            <el-col :span="18">
                <el-table :data="item.value" size="small">
                    <el-table-column label="名称" prop="oldFileName">
                        <template #default="scope">
                            <el-link :underline="false" style="font-size:12px;" @click="openView(scope.row)">{{scope.row.oldFileName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="uploadTime"></el-table-column>
                    <el-table-column label="创建人" prop="userName"></el-table-column>
                    <el-table-column label="操作" fixed="right" v-if="title == '文档'">
                        <template  #default="scope">
                            <el-button type="primary" size="small" @click="selectModel(scope.row)">共享</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-image-viewer @close="closeImgViewer" :url-list="imageList" v-if="showImageViewer" />
        <iframe-dialog v-model:dialogVisible="dialogIframe" :url="url"></iframe-dialog>
        <select-share-user v-model:dialogDrawer="showShareToStaffTransfer" :user-list="userList" :file-map="fileMap"></select-share-user>

    </el-dialog>
</template>

<script>
import { ref, toRefs, computed, reactive } from 'vue'
import IframeDialog from '/@/components/iframe/index.vue'
import ShareToStaffTransfer from "./ShareToStaffTransfer.vue";
import SelectShareUser from "./SelectShareUser.vue"
import api from '/@/api/commonApi'


export default {
    name: 'MaterialDialog',
    props: {
        title: {
            type: String,
            default: ''
        },
        dialogVisible: {
            type: Boolean,
            defalut: false
        },
        defaultList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    components: {
        ShareToStaffTransfer,
        IframeDialog,
        SelectShareUser
    },
    setup(props, context) {
        const { dialogVisible, defaultList } = toRefs(props)
        const state = reactive({
            material: [],
            showImageViewer: false,
            imageList: [],
            dialogIframe: false,
            url: '',
            showShareToStaffTransfer:false,
            fileMap: {},
            userList: []
        })
        let dialog = computed({
            get: () => dialogVisible.value,
            set: (val) => {
                context.emit('update:dialogVisible', val)
            }
        })
        let materialList = computed({
            get: () => {
                return defaultList.value
            }
        })
        const nodeClick = (e, index) => {
            state.material[index] = e.children
        }
        const openView = (row) => {
            const ext = row.ext
            const images = ['jpg', 'png', 'jpeg', 'bmp', 'gif', 'tif', 'tiff', 'dib']
            if(images.includes(ext)){
                state.imageList = ['https://images.pexels.com/photos/2007140/pexels-photo-2007140.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260']
                state.showImageViewer = true
            }else {
                state.url = row.fileVisitSite
                state.dialogIframe = true
            }
        }
        const closeImgViewer = () => {
            state.showImageViewer = false
        }

        const generateData = () => {
            const data = []
            for (let i = 1; i <= 15; i++) {
                data.push({
                    key: i,
                    label: `Option ${i}`,
                    disabled: i % 4 === 0,
                })
            }
            return data
        }

        const data = ref(generateData())
        const value = ref([])

        const selectModel = item => {
            api.getShareUserList({fileId: item.id}).then(res => {
                state.userList = res.data
                state.fileMap = item
                state.showShareToStaffTransfer = true
            })
        }

        return {
            dialog,
            nodeClick,
            materialList,
            openView,
            selectModel,
            closeImgViewer,
            data,
            value,
            ...toRefs(state)
        }
    }
}
</script>

<style scoped lang="scss">
.material-row{
    margin-bottom: 15px;
    &:last-child{
        margin-bottom: 0;
    }
}
</style>